import Image from "next/image"
import { ReactNode } from "react"
import { useGetImageById } from "../model/useGetImageById"
import { UiSpinner } from "@/shared/Uikit/UiSpinner"


type ImageBlockProps = {
    imageId: number,
    controlBar?: ReactNode
}

export default function ImageBlock(props: ImageBlockProps) {
    const { image, isPending, isSuccess, refetch, errorMessage } = useGetImageById(props.imageId)
    return (
        <>

            <div className='w-full h-96 flex justify-center px-24'>

                {isSuccess && image &&
                    <>
                    <div className='border border-black'>
                        <img
                        className='max-h-96 min-h-96'
                        src={`/api/${image.imageFilePath}`} 
                        alt={image.name}
                         />
                    </div>
                    </>
                }
                {isPending &&
                    <UiSpinner className='size-10' />
                }
                {errorMessage}

            </div>

        </>
    )
}
